<script setup lang="ts">
import {
  type FormInst,
  NButton,
  NSelect,
  NFormItem,
  type SelectOption,
  NInput,
  useMessage,
  type UploadFileInfo,
  NImage,
  NInputNumber,
  NSpace,
  NForm,
  NDatePicker,
  NTreeSelect
} from 'naive-ui'
import { ref, shallowRef, watch, type Ref, onMounted, reactive, toRaw, computed } from 'vue'
import FixedAction from '@/components/FixedAction.vue'
import VUpload from './Upload.vue'
import useRouteReplace from '@/hooks/useRouteReplace'
import { useRoute } from 'vue-router'
// import DynamicPageForm from '@/components/DynamicPageForm/DynamicPageForm.vue'
import type { ModelJson } from '@/components/DynamicPageForm/DynamicFormTypes'
import { mergeWith, isArray } from 'lodash-es'
import type { CTSelectOption } from '@/api/collection'
import { sendRequest } from '@/utils/api'
import type { HttpResponse, JsonHttpResponse } from '@/utils/http'
import UploadFileV2 from '@/views/common/UploadFileV2.vue'
import type { DicTreeModel } from '@/api/dic'
import VBackImg from '@/assets/images/back.png'
import FileList from '@/components/FileList.vue'
import { keysOf } from '@/utils/object'
import VAttachments from '@/views/OA/Common/Attachments.vue'

const formRef = ref<FormInst | null>(null)
const formRef2 = ref<FormInst | null>(null)
const datetime = computed<any>({
  get() {
    return formData.value.receiveTime
  },
  set(v) {
    formData.value.receiveTime = v
  }
})
const datetimeT = computed<any>({
  get() {
    return formData.value.startDate
  },
  set(v) {
    formData.value.startDate = v
  }
})
const datetimeEnd = computed<any>({
  get() {
    return formData.value.endDate
  },
  set(v) {
    formData.value.endDate = v
  }
})
const message = useMessage()
const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
const isUpdate = route.query.type === 'update'
const isDetail = route.query.type === 'detail'
const rules = {
  collectTypeCode: {
    required: true,
    message: '请选择征集方式',
    trigger: ['change', 'blur']
  },
  receiveTime: {
    required: true,
    message: '请选择接收时间',
    trigger: ['change', 'blur']
  },
  receiveUser: {
    required: true,
    message: '请输入接收人',
    trigger: ['change', 'blur', 'input']
  },
  transferUser: {
    required: true,
    message: '请输入移交人',
    trigger: ['change', 'blur', 'input']
  },
  supervisor: {
    required: true,
    message: '请输入督交人',
    trigger: ['change', 'blur', 'input']
  },
  itemName: {
    required: true,
    message: '请输入名称',
    trigger: ['change', 'blur']
  },
  itemNum: {
    required: true,
    trigger: ['change', 'blur', 'input'],
    validator: () => {
      if (!formData.value.itemNum) return new Error('请输入数量')
      return true
    }
  }
}
// 附件
const handleUploadList = (v: any) => (formData.value.imgIds = v)
const createQuerySelectOptions = (
  options: Ref<CTSelectOption[]>,
  loading: Ref<boolean>,
  onFinish?: () => void
) => {
  return async (parentCode?: string) => {
    try {
      loading.value = true
      const [error, res] = await sendRequest<HttpResponse<CTSelectOption[]>>({
        module: 'collection',
        api: 'typeSelectByCode',
        override: {
          params: {
            parentCode: parentCode || null
          }
        }
      })
      if (error) throw error
      if (res.code !== 0) throw new Error(res.msg)
      options.value = res.data
      onFinish?.()
    } catch (error) {
      console.log(error)
    } finally {
      loading.value = false
    }
  }
}
const createAutoSelectFirstItem = (value: Ref<string | null>, options: Ref<CTSelectOption[]>) => {
  return () => {
    if (options.value.length > 0) {
      value.value = options.value[0].value
    }
  }
}
const createCascader = (
  configs: {
    value: Ref<string | null>
    options: Ref<CTSelectOption[]>
    loading: Ref<boolean>
    autoSelectFirst: boolean
    onFinish?: () => void
  }[]
) => {
  const queryFuncList = configs.map((config) => {
    const autoSelect = config.autoSelectFirst
      ? createAutoSelectFirstItem(config.value, config.options)
      : undefined
    return createQuerySelectOptions(config.options, config.loading, () => {
      autoSelect?.()
      config.onFinish?.()
    })
  })

  for (let i = 0; i < configs.length - 1; i++) {
    if (!configs[i + 1]) continue

    let flag = false
    watch(
      configs[i].value,
      (v) => {
        if (isUpdate && !flag && v) {
          console.log('ins')
          flag = true
        } else {
          configs[i + 1].options.value = []
          configs[i + 1].value.value = null
        }

        if (!v) return
        queryFuncList[i + 1](v)
      },
      { immediate: true }
    )
  }

  return queryFuncList[0]
}

const oneSelectValue = ref<string | null>(null)
const oneSelectOptions = shallowRef<CTSelectOption[]>([])
const oneSelectLoading = ref(false)

const twoSelectValue = ref<string | null>(null)
const twoSelectOptions = shallowRef<CTSelectOption[]>([])
const twoSelectLoading = ref(false)

const threeSelectValue = ref<string | null>(null)
const threeSelectOptions = shallowRef<CTSelectOption[]>([])
const threeSelectLoading = ref(false)

const isUseLastSelect = ref(true)
const cascader = createCascader([
  {
    value: oneSelectValue,
    options: oneSelectOptions,
    loading: oneSelectLoading,
    autoSelectFirst: false
  },
  {
    value: twoSelectValue,
    options: twoSelectOptions,
    loading: twoSelectLoading,
    autoSelectFirst: false
  },
  {
    value: threeSelectValue,
    options: threeSelectOptions,
    loading: threeSelectLoading,
    autoSelectFirst: false,
    onFinish: () => (isUseLastSelect.value = threeSelectOptions.value.length > 0)
  }
])

//去除空格
const change1 = (v: any) => {
  formData.value.receiveUser = v.trim()
}
const change2 = (v: any) => {
  formData.value.deliveryUnit = v.trim()
}
const change3 = (v: any) => {
  formData.value.transferUser = v.trim()
}
const change4 = (v: any) => {
  formData.value.transferUserPhone = v.trim()
}
const change5 = (v: any) => {
  formData.value.supervisor = v.trim()
}
const change6 = (v: any) => {
  formData.value.itemName = v.trim()
}
const change7 = (v: any) => {
  formData.value.itemNum = v.replace(/[^\d]/g, '')
}
const change8 = (v: any) => {
  formData.value.specifications = v.trim()
}
const change9 = (v: any) => {
  formData.value.materialQuality = v.trim()
}
const change10 = (v: any) => {
  formData.value.binding = v.trim()
}
const change11 = (v: any) => {
  formData.value.appearance = v.trim()
}
const change12 = (v: any) => {
  formData.value.years = v.trim()
}
const change13 = (v: any) => {
  formData.value.press = v.trim()
}
const change14 = (v: any) => {
  formData.value.language = v.trim()
}
const change15 = (v: any) => {
  formData.value.notes = v.trim()
}
const change16 = (v: any) => {
  formData.value.depositTerm = v.trim()
}

const isTrue = ref(false)
const changeTree = (v: any) => {
  formData.value.collectTypeCode = v
  if (formData.value.collectTypeCode === 'A3007') {
    isTrue.value = true
  } else {
    isTrue.value = false
  }
}
const clueMethodOptions = reactive<DicTreeModel[]>([])
const queryClueMethodOptions = async () => {
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'dic',
      api: 'getTree',
      override: {
        params: {
          dicCode: 'A30'
        }
      }
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueMethodOptions.length = 0
    clueMethodOptions.push(...(res.data[0] ? res.data[0].children || [] : []))
  } catch (error) {
    console.error(error)
  }
}

const formData = ref({} as any)
const handleUpdateFormData = (key: string, value: unknown) => {
  formData.value[key] = value
}
const fileList = ref<UploadFileInfo[]>([])
const fileListImg = ref<UploadFileInfo[]>([])
const handleUpdateFileList = (e: UploadFileInfo[]) => {
  fileList.value = e
}
const validatorTypeFormItem = () => {
  if (isUseLastSelect.value) return threeSelectValue.value !== null
  return twoSelectValue.value !== null
}
const validate = (form: FormInst | null): Promise<void> => {
  if (!form) return Promise.resolve()

  return new Promise((resolve, reject) => {
    form.validate((error) => {
      if (error) {
        reject()
      } else {
        resolve()
      }
    })
  })
}

const submitLoading = ref(false)
const handleSubmit = async () => {
  if (submitLoading.value) return
  await Promise.all([validate(formRef.value), validate(formRef2.value)])
  submitLoading.value = true
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'collection',
    api: 'saveOrUpdate',
    override: {
      data: {
        ...formData.value,
        clueId: isUpdate ? route.params.clueId : route.params.id,
        itemTypeName: isUseLastSelect.value
          ? threeSelectOptions.value.find((item) => item.value === threeSelectValue.value)?.label
          : twoSelectOptions.value.find((item) => item.value === twoSelectValue.value)?.label,
        itemTypeCode: isUseLastSelect.value ? threeSelectValue.value : twoSelectValue.value,
        // @ts-ignore
        fileIds: fileList.value ? fileList.value.map((e) => e.file?.remoteId).join(',') : null
        // jsonStr: JSON.stringify(formData.value)
      }
    }
  })
  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  message.success(res.msg)
  submitLoading.value = false
  window.flags.flushClueTable = true
  routeReplace()
}

const baseModel: ModelJson = {
  elements: [
    {
      type: 'NInput',
      key: 'itemName',
      label: '名称：',
      rule: {
        required: true,
        message: '名称必填'
      }
    },
    {
      type: 'NInputNumber',
      key: 'itemNum',
      label: '数量：',
      style: { flex: 1 },
      props: {
        showButton: false,
        min: 0
      }
      // rule: {
      //   type: 'number',
      //   required: true,
      //   message: '数量必填'
      // }
    },
    {
      type: 'NInput',
      key: 'itemName',
      label: '规格：'
    },
    {
      type: 'NInput',
      key: 'itemName',
      label: '材质：'
    },
    {
      type: 'NInput',
      key: 'itemName',
      label: '装帧：'
    },
    {
      type: 'NInput',
      key: 'itemName',
      label: '品相：'
    },
    {
      type: 'NInput',
      key: 'itemName',
      label: '年代：'
    },
    {
      type: 'NInput',
      key: 'itemName',
      label: '出版社：'
    },
    {
      type: 'NInput',
      key: 'itemName',
      label: '语种：'
    },
    {
      type: 'NInput',
      key: 'notes',
      label: '备注：',
      props: {
        type: 'textarea',
        rows: 1
      },
      rule: {
        // @ts-ignore
        noInjectLimit: true,
        // @ts-ignore
        validator: (_, value) => {
          return value ? value.length <= 500 : true
        },
        trigger: ['blur', 'input'],
        message: '输入长度超出500字符'
      }
    },
    {
      type: 'NDatePicker',
      key: 'receiveTime',
      label: '开始时间：',
      props: { type: 'date', format: 'yyyy-MM-dd' },
      style: { flex: 1 }
      // rule: {
      //   required: true,
      //   message: '接收时间必填'
      // }
    },
    {
      type: 'NDatePicker',
      key: 'receiveTime',
      label: '结束时间：',
      props: { type: 'date', format: 'yyyy-MM-dd' },
      style: { flex: 1 }
      // rule: {
      //   required: true,
      //   message: '接收时间必填'
      // }
    },
    // {
    //   type: 'NSelect',
    //   key: 'collectTypeCode',
    //   label: '征集方式：',
    //   props: {
    //     options: clueMethodOptions,
    //     valueField: 'code',
    //     labelField: 'name'
    //   },
    //   // rule: {
    //   //   required: true,
    //   //   message: '征集方式必填'
    //   // }
    // },
    {
      type: 'NInput',
      key: 'receiveUser',
      label: '代存期限：'
    },
    {
      type: 'NUpload',
      key: 'receiveUser',
      label: '代存期限：'
    }
  ]
}

// const model = shallowRef<ModelJson>(baseModel)
// const queryTypeJson = async (code: string): Promise<ModelJson> => {
//   try {
//     const [error, res] = await sendRequest<JsonHttpResponse<ModelJson>>({
//       module: 'collection',
//       api: 'jsonContent',
//       override: {
//         params: {
//           name: `${code}.json`
//         }
//       }
//     })
//     if (error) throw error
//     if (res.code !== 200) throw new Error(res.message)
//     return res.data
//   } catch (error) {
//     console.error(error)
//     message.error('获取表单失败')
//     return toRaw(baseModel)
//   }
// }
// const setModelJson = async (code?: string | null) => {
//   if (!code) return (model.value = toRaw(baseModel))
//   model.value = mergeWith({}, toRaw(baseModel), await queryTypeJson(code), (obj: any, src: any) => {
//     if (isArray(obj)) return [...obj, ...src]
//   }) as ModelJson
// }

// watch(
//   [isUseLastSelect, twoSelectValue, threeSelectValue],
//   async ([v, two, three]) => {
//     setModelJson(v ? three : two)
//   },
//   { immediate: true }
// )

const clueInfoLoading = ref(false)
const checkIsDetail = async () => {
  if (!isDetail && !isUpdate) return

  try {
    clueInfoLoading.value = true
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'collection',
      api: 'info',
      uri: {
        id: route.params.id as string
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    const { data } = res
    changeTree(data.collectTypeCode)
    keysOf(data).forEach((e) => {
      {
        formData.value[e] = data[e] as never
        if (e === 'startDate') {
          formData.value.startDate = data.startDate ? data.startDate.slice(0, 10) : null
        }
        if (e === 'endDate') {
          formData.value.endDate = data.endDate ? data.endDate.slice(0, 10) : null
        }
        if (e === 'fullCode') {
          if (data.fullCode) {
            data.fullCode = data.fullCode.split('>')
            if (data.fullCode.length == 1) {
              oneSelectValue.value = data.fullCode[0]
            }
            if (data.fullCode.length == 2) {
              oneSelectValue.value = data.fullCode[0]
              twoSelectValue.value = data.fullCode[1]
            }
            if (data.fullCode.length == 3) {
              oneSelectValue.value = data.fullCode[0]
              twoSelectValue.value = data.fullCode[1]
              threeSelectValue.value = data.fullCode[2]
            }
          }
        }
      }
    })
    // const robj = Object.assign(JSON.parse(data.jsonStr || '{}'), {
    //   id: data.id,
    //   itemName: data.itemName,
    //   receiveTime: data.receiveTime,
    //   itemTypeCode: data.itemTypeCode,
    //   itemTypeName: data.itemTypeName,
    //   itemNum: data.itemNum,
    //   receiveUser: data.receiveUser,
    //   collectTypeCode: data.collectTypeCode,
    //   collectTypeName: data.collectTypeName,
    //   itemCode: data.itemCode,
    //   notes: data.notes,
    //   provideId: data.provideId,
    //   collectorId: data.collectorId
    // })

    // if (isUpdate && !robj.itemTypeName) {
    //   cascader()
    // }
    if (isUpdate) {
      cascader()
    }

    // await setModelJson(res.data.itemTypeCode)

    // formData.value = robj
    fileListImg.value = data.imagesList
    fileList.value = data.fileList?.map((e: any, i: number) => {
      const f = new File([e.name], e.name, { type: e.type })
      // @ts-ignore
      f.remoteId = e.id
      return {
        id: i,
        name: e.name,
        file: f,
        status: 'finished',
        url: e.path,
        remoteId: e.id
      }
    })
  } catch (error) {
    console.error(error)
  } finally {
    setTimeout(() => {
      clueInfoLoading.value = false
    }, 2000)
  }
}

onMounted(() => {
  if (!isDetail && !isUpdate) cascader()
  queryClueMethodOptions()
  checkIsDetail()
})
</script>

<template>
  <DetailFormProvider :disabled="!isDetail">
    <div class="add-collect">
      <div class="ac-title">征集信息</div>
      <div
        class="ac-card"
        style="padding-bottom: 0"
      >
        <NSpace>
          <NForm
            ref="formRef2"
            :model="formData"
            require-mark-placement="left"
            :rules="rules"
            label-placement="left"
            :label-width="160"
            label-align="right"
            :disabled="isDetail"
          >
            <NSpace>
              <NFormItem
                label="征集方式:"
                path="collectTypeCode"
              >
                <NTreeSelect
                  :options="clueMethodOptions"
                  v-model:value="formData.collectTypeCode"
                  placeholder="请选择征集方式"
                  clearable
                  style="width: 450px;margin-right: 20px;'"
                  key-field="code"
                  label-field="name"
                  @update-value="changeTree"
                />
              </NFormItem>
              <NFormItem
                label="接收时间:"
                path="receiveTime"
              >
                <NDatePicker
                  v-if="!isDetail"
                  input-readonly
                  v-model:formatted-value="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  default-time="00:00:00"
                  style="width: 450px"
                  placeholder="请选择接收时间"
                />
                <NInput
                  v-else
                  v-model:value="datetime"
                  placeholder="接收时间"
                  style="width: 450px"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="接收人:"
                path="receiveUser"
              >
                <NInput
                  v-model:value="formData.receiveUser"
                  placeholder="请输入接收人"
                  @update:value="change1"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="交送单位:"
                path="deliveryUnit"
              >
                <NInput
                  v-model:value="formData.deliveryUnit"
                  placeholder="请输入交送单位"
                  @update:value="change2"
                  style="width: 450px"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="移交人:"
                path="transferUser"
              >
                <NInput
                  v-model:value="formData.transferUser"
                  placeholder="请输入移交人"
                  @update:value="change3"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="移交人联系方式:"
                path="transferUserPhone"
              >
                <NInput
                  v-model:value="formData.transferUserPhone"
                  placeholder="输入移交人联系方式"
                  style="width: 450px"
                  @update:value="change4"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="督交人:"
                path="supervisor"
              >
                <NInput
                  v-model:value="formData.supervisor"
                  placeholder="请输入督交人"
                  style="width: 450px"
                  @update:value="change5"
                />
              </NFormItem>
            </NSpace>
          </NForm>
        </NSpace>
      </div>
      <div class="br"></div>

      <div class="ac-title">物品信息</div>
      <div
        class="ac-card"
        style="padding-bottom: 0"
      >
        <NSpace>
          <NForm
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-placement="left"
            :label-width="160"
            require-mark-placement="left"
            label-align="right"
            :disabled="isDetail"
          >
            <NSpace>
              <NFormItem
                label="类型："
                path="type"
                :rule="
                  !isDetail
                    ? {
                        required: true,
                        message: '类型必填',
                        validator: () => validatorTypeFormItem()
                      }
                    : undefined
                "
              >
                <NSpace v-if="!isDetail">
                  <!-- !isDetail && (!isUpdate || (isUpdate && !formData.itemTypeName)) -->
                  <NSelect
                    v-model:value="oneSelectValue"
                    :options="(oneSelectOptions as unknown as SelectOption[])"
                    :loading="oneSelectLoading"
                    :disabled="isDetail || oneSelectLoading"
                    style="margin-right: 10rem; width: 350px"
                  />
                  <NSelect
                    v-model:value="twoSelectValue"
                    :options="(twoSelectOptions as unknown as SelectOption[])"
                    :loading="twoSelectLoading"
                    :disabled="isDetail || oneSelectLoading || twoSelectLoading"
                    style="margin-right: 10rem; width: 350px"
                  />
                  <NSelect
                    v-model:value="threeSelectValue"
                    clearable
                    :options="(threeSelectOptions as unknown as SelectOption[])"
                    :disabled="
                      isDetail || oneSelectLoading || twoSelectLoading || threeSelectLoading
                    "
                    :loading="threeSelectLoading"
                    style="width: 350px"
                  />
                </NSpace>

                <NInput
                  v-else
                  disabled
                  :value="formData.itemTypeName"
                  style="width: 1090px"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="名称:"
                path="itemName"
              >
                <NInput
                  v-model:value="formData.itemName"
                  placeholder="输入名称"
                  @update:value="change6"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="数量:"
                path="itemNum"
              >
                <NInput
                  v-model:value="formData.itemNum"
                  placeholder="输入数量"
                  style="width: 450px"
                  @input="change7"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="规格:"
                path="specifications"
              >
                <NInput
                  v-model:value="formData.specifications"
                  placeholder="请输入规格"
                  clearable
                  @update:value="change8"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="材质:"
                path="materialQuality"
              >
                <NInput
                  v-model:value="formData.materialQuality"
                  placeholder="输入材质"
                  @update:value="change9"
                  style="width: 450px"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="装帧:"
                path="binding"
              >
                <NInput
                  v-model:value="formData.binding"
                  placeholder="请输入装帧"
                  @update:value="change10"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="品相:"
                path="appearance"
              >
                <NInput
                  v-model:value="formData.appearance"
                  placeholder="请输入品相"
                  @update:value="change11"
                  style="width: 450px"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="年代:"
                path="years"
              >
                <NInput
                  v-model:value="formData.years"
                  placeholder="请输入年代"
                  @update:value="change12"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="出版社:"
                path="press"
              >
                <NInput
                  v-model:value="formData.press"
                  placeholder="请输入出版社"
                  style="width: 450px"
                  @update:value="change13"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="语种:"
                path="language"
              >
                <NInput
                  v-model:value="formData.language"
                  placeholder="请输入语种"
                  @update:value="change14"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="备注:"
                path="notes"
              >
                <NInput
                  v-model:value="formData.notes"
                  placeholder="请输入备注"
                  style="width: 450px"
                  @update:value="change15"
                  type="textarea"
                  :autosize="{
                    minRows: 1,
                    maxRows: 5
                  }"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="开始时间:"
                path="startDate"
                v-if="isTrue"
              >
                <NDatePicker
                  input-readonly
                  v-model:formatted-value="datetimeT"
                  value-format="yyyy-MM-dd"
                  type="date"
                  style="width: 450px;margin-right: 20px;'"
                  placeholder="输入开始时间"
                />
              </NFormItem>
              <NFormItem
                label="结束时间:"
                path="endDate"
                v-if="isTrue"
              >
                <NDatePicker
                  input-readonly
                  v-model:formatted-value="datetimeEnd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  style="width: 450px"
                  placeholder="输入结束时间"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="代存期限:"
                path="depositTerm"
                v-if="isTrue"
              >
                <NInput
                  v-model:value="formData.depositTerm"
                  placeholder="请输入代存期限"
                  @update:value="change16"
                  style="width: 450px;margin-right: 20px;'"
                />
              </NFormItem>
              <NFormItem
                label="图片:"
                path="fileIds"
              >
                <VUpload
                  :file-list="fileListImg"
                  @getList="handleUploadList"
                  style="width: 450px"
                  v-if="!isDetail"
                  :max="5"
                />
                <VAttachments
                  v-else
                  :attach-list="formData.imagesList"
                ></VAttachments>
              </NFormItem>
            </NSpace>
          </NForm>
        </NSpace>
        <div class="br"></div>
        <div class="ac-title">其他信息</div>
        <NFormItem
          label="附件："
          label-placement="left"
        >
          <UploadFileV2
            v-if="!isDetail"
            :file-list="fileList"
            :disabled="isDetail"
            @update:file-list="handleUpdateFileList"
          >
            <template #trigger="{ handleClick }">
              <n-button
                @click="handleClick"
                color="#6CB187"
                ghost
                size="small"
              >
                点击上传
              </n-button>
            </template>
          </UploadFileV2>
          <FileList
            v-else
            :file-list="fileList"
          />
        </NFormItem>
      </div>
    </div>
  </DetailFormProvider>
  <FixedAction>
    <div
      class="add-collect-buttons"
      :class="{ start: isDetail }"
    >
      <NButton
        v-if="!isDetail"
        color="#999999"
        ghost
        :disabled="submitLoading"
        @click="routeReplace"
      >
        取消
      </NButton>
      <NButton
        v-else
        style="width: 78px; color: #5fb17f"
        ghost
        :class="{ back: isDetail }"
        @click="routeReplace"
      >
        <template #icon>
          <NImage
            :src="VBackImg"
            style="width: 50rem; height: 50rem"
            preview-disabled
          ></NImage>
        </template>
        返回
      </NButton>

      <NButton
        v-if="!isDetail"
        color="#5FB17F"
        :disabled="submitLoading"
        :loading="submitLoading"
        @click="handleSubmit"
      >
        确定
      </NButton>
    </div>
  </FixedAction>
</template>

<style scoped lang="scss">
.add-collect {
  min-height: 100%;
  padding: 15rem 0 130rem;
  background-color: #f0efee;

  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }

  .ac-card {
    padding: 20rem;
    background-color: #e1e1e1;
  }

  .ac-title {
    font-size: 26rem;
    margin-bottom: 30rem;
    color: #048c5e;
    line-height: 1;
  }
}

.add-collect-buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16rem;

  .n-button:not(.back) {
    width: 100rem;
    height: 50rem;
  }

  &.start {
    justify-content: flex-start;
  }
}
</style>
